/**
 * 
 * @param {Object} instance 
 * @param {HTMLElement} parent 
 */
const render = (instance, parent) => {
    let dom = document.createElement(instance.type)
    needTrack = true
    //设置属性
    if (instance.props) {
        for (let key in instance.props) {
            // props是绑定的响应式对象 则
            console.log(isReactive(instance.props[key]));
            isReactive(instance.props[key]) ?
                (
                    effect(() => {
                        let attribute = instance.props[key]
                        dom.setAttribute(key, attribute.target[attribute.key])
                    })
                )
                : dom.setAttribute(key, instance.props[key])
        }
    }
    //注册事件
    if (instance.events) {
        for (const key in instance.events) {
            let event = instance.events[key]
            dom[key] = event
        }
    }
    if (Array.isArray(instance.children)) {
        //如果是有子元素 遍历子元素
        for (let i = 0; i < instance.children.length; i++) {
            let child = instance.children[i]
            render(child, dom)
        }
    } else if (isReactive(instance.children)) {
        //如果是响应式变量
        let { target, key } = instance.children
        //赋值当前副作用函数
        effect(() => {
            dom.innerHTML = target[key]
        })
    }
    parent.appendChild(dom)
}